<template>
  <div>
    <van-popup
      class="popup-all"
      :show="showPopup"
      position="bottom"
      @update:show="updateShow"
      :style="{ height: '80%' }"
      round
    >
      <div class="popup-content">
        <div style="background-color: #fff">
          <CommonHeader
            type="黑"
            leftText="取消"
            title="筛选"
            :onLeft="onClickLeft"
          />
        </div>
        <div style="margin: 12px; border-radius: 4px">
          <van-field
            class="field1"
            label="发证机关"
            center
            v-model="data.qymc"
            placeholder="请输入"
          />
        </div>
        
        <div style="margin: 16px; margin-top: 32px;">
            <van-button type="primary" round block @click="onSearch"
                color="linear-gradient(to right, #00BF87, #25F0A0)">搜索</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch } from "vue";
const emit = defineEmits(["update:show", "data-selected-click"]);
const props = defineProps({
  dataValue: {
    type: Object,
    default: null,
  },
  show: {
    default: false,
  },
});
watch(
  () => props.show,
  (newValue, oldValue) => {
    showPopup.value = newValue;
  }
);
watch(
  () => props.dataValue,
  (newValue, oldValue) => {
    data.value = {...newValue};
  }
);
const showPopup = ref(props.show);
const data = ref({ ...props.dataValue });


const onSearch = () => {
  showPopup.value = false;
  updateShow(false)
  emit("data-selected-click", data.value);
};
const updateShow = (value) => {
  emit("update:show", value);
};
const onClickLeft = () => {
  updateShow(false);
};
</script>

<style scoped>
.popup-content {
  background-color: #f3f9f8;
  height: 100%;
}

.rounded-field {
  border-radius: 32px;
  padding: 8px 16px;
}

.left-text {
  color: black;
  cursor: pointer;
}

.popup-content :deep(.van-search__content) {
  padding: 0 16px;
  background-color: #f1f1f1;
}

.my-list {
  margin: 0 12px 0 12px;
  --van-cell-label-font-size: 12px;
}

.my-cell {
  margin: 12px 0 0 0;
  border-radius: 8px;
  --van-cell-label-font-size: 12px;
}

.my-cell-title {
  font-size: 14px;
}

.my-cell-label {
  font-size: 12px;
  color: #999999;
}
</style>